import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import Gauge from '../components/Gauge'
import BtnBotLayout from '@/components/BtnBotLayout'
import { history, useParams } from 'umi'
import { useEffect, useState } from 'react'
import PageLoading from '@/components/Global/PageLoading'

const levelMap = new Map([
    [
        0,
        {
            text: '较低',
            className: styles.level_0,
        },
    ],
    [
        1,
        {
            text: '适中',
            className: styles.level_1,
        },
    ],
    [
        2,
        {
            text: '较高',
            className: styles.level_2,
        },
    ],
    [
        3,
        {
            text: '非常高',
            className: styles.level_3,
        },
    ],
])

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { getResultById, resultInfo } = store
    const { id } = useParams<any>()
    const { userEvalResult, update_time } = resultInfo
    const { score, detail } = userEvalResult || {}
    const [level, setLevel] = useState(-1)

    useEffect(() => {
        const name = resultInfo?.testEval?.name
        if (score < 29) {
            setLevel(0)
        } else if (score < 43) {
            setLevel(1)
        } else if (score < 57) {
            setLevel(2)
        } else if (score < 71) {
            setLevel(3)
        }
        document.title = name ? `${name}结果` : ''
    }, [resultInfo])

    useEffect(() => {
        getResultById(id)
    }, [])

    if (!resultInfo?.id) {
        return <PageLoading />
    }

    return (
        <div className={`${styles.container} ${levelMap.get(level || 0)?.className}`}>
            <BtnBotLayout
                footer={
                    <div className={styles.back_btn} onClick={() => history.goBack()}>
                        返回列表
                    </div>
                }
            >
                <div className={styles.gauge_wrapper}>
                    {score && <Gauge value={score} />}
                    <div className={styles.text_1}>知觉到的压力</div>
                    <div className={styles.text_2}>{levelMap.get(level)?.text || ''}</div>
                    <div className={styles.text_3}>测试时间：{update_time}</div>
                </div>
                <div className={styles.box}>
                    <div className={styles.box_title}>评估说明</div>
                    <div className={styles.box_content}>{detail || ''}</div>
                </div>
            </BtnBotLayout>
        </div>
    )
})
